<template>
  <div class="dashboard-container">
    <!-- 顶部四个指标卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <div class="metric-card blue">
          <div class="header">入库</div>
          <div class="content">
            <div>待入库：15</div>
            <div>待质检：15</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="metric-card yellow">
          <div class="header">出库</div>
          <div class="content">
            <div>待截单：5</div>
            <div>待出库：5</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="metric-card purple">
          <div class="header">其他</div>
          <div class="content">
            <div>待波次：5</div>
            <div>待上架：2</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="metric-card red">
          <div class="header">库存预警</div>
          <div class="content">
            <div>异常单：5</div>
            <div>今日到货：5</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 中间图表区域 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="8">
        <div class="chart-card">
          <h3>仓库货物占比</h3>
          <div ref="pieChart" style="height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="chart-card">
          <div class="flex-between">
            <h3>生产入库趋势</h3>
            <div class="time-range">
              <span class="active">本月</span>
              <span>今年</span>
            </div>
          </div>
          <div ref="barChart" style="height: 300px;"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 底部四个折线图 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in lineCharts" :key="index">
        <div class="chart-card">
          <h3>{{ item.title }}</h3>
          <div :ref="`lineChart${index}`" style="height: 200px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

type EChartsOption = echarts.EChartsOption

// 饼图配置
const pieChart = ref<HTMLElement>()
const pieData = [
  { value: 59, name: '园区仓' },
  { value: 28.2, name: '盛泽仓' },
  { value: 12.8, name: '常熟仓' }
]

// 柱状图配置
const barChart = ref<HTMLElement>()
const barData = ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07']
const barValues = [30, 25, 20, 22.54, 20, 15, 10]

// 折线图配置
const lineCharts = [
  { title: '近7日销售出库', color: '#5470C6' },
  { title: '近7日辅料出库', color: '#91CC75' },
  { title: '近7日移库', color: '#FAC858' },
  { title: '近7日退货入库', color: '#EE6666' }
]

onMounted(() => {
  initPieChart()
  initBarChart()
  initLineCharts()
})

const initPieChart = () => {
  const chart = echarts.init(pieChart.value!)
  const option: EChartsOption = {
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: '70%',
      data: pieData,
      label: { formatter: '{b}：{d}%' }
    }]
  }
  chart.setOption(option)
}

const initBarChart = () => {
  const chart = echarts.init(barChart.value!)
  const option: EChartsOption = {
    xAxis: { type: 'category', data: barData },
    yAxis: { type: 'value' },
    series: [{
      type: 'bar',
      data: barValues,
      itemStyle: { color: '#3398DB' }
    }]
  }
  chart.setOption(option)
}

const initLineCharts = () => {
  lineCharts.forEach((item, index) => {
    const chart = echarts.init((document.querySelector(`lineChart${index}`) as HTMLElement))
    const option: EChartsOption = {
      xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'] },
      yAxis: { type: 'value' },
      series: [{
        type: 'line',
        data: [39.41, 60, 30, 70, 80, 50, 100],
        itemStyle: { color: item.color }
      }]
    }
    chart.setOption(option)
  })
}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background: #fff;
}

.metric-card {
  padding: 20px;
  border-radius: 4px;
  color: white;
  
  .header {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  &.blue { background: #1a8cff }
  &.yellow { background: #ffc300 }
  &.purple { background: #a64dff }
  &.red { background: #ff4d4d }
}

.chart-card {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  
  h3 {
    margin: 0 0 15px;
    font-size: 14px;
    color: #333;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-range {
  span {
    margin-left: 10px;
    cursor: pointer;
    
    &.active {
      color: #1a8cff;
      font-weight: bold;
    }
  }
}

.mb-20 { margin-bottom: 20px; }
</style>